<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            .box{
                width: 100%;
                height: 400px;
            }
            .bg-red{
                background-color: #f00;
            }
            .bg-green{
                background-color: #0f0;
            }
            #overflow-scroll{
                height: 300px;
                width: 100%;
                background-color: rgba(0,0,0,.1);
                overflow:auto;
            }
            #context-example{
                margin-top: 150px;
                height: 400px;
                width: 100%;
                background-color: #ff0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box bg-red">第1盒子</div>
            <div class="box bg-green">
                <h2>第2盒子</h2>
                <div class="counterBox">
                    <span class="counter" id="counter">1,478,865,489</span>
                </div>
            </div>
            <div class="box bg-red">第3盒子</div>
            <div class="box bg-green">
                <h2>第4盒子</h2>
                <div id="overflow-scroll">
                    <div id="context-example">scroll滚动盒子</div>
                </div>
            </div>
        </div>
        <script src="js/noframework.waypoints.min.js"></script>
        <script>
            // 1.基本使用
            // var waypoint=new Waypoint({
            //     element:document.getElementById("counter"),
            //     handler:function(direction){
            //         alert("到达计数器");
            //         // alert("方向："+direction);//direction值 向下down向上up
            //         // alert('元素ID:'+this.element.id+',trigger at'+this.triggerPoint)
            //         //triggerPoint y位置scrollY
            //     },
            //     offset:80
            // })
            // 2.在scroll窗口中的使用
            var waypoint = new Waypoint({
              element: document.getElementById('context-example'),
              handler: function() {
                alert('Context example triggered')
              },
              context: document.getElementById('overflow-scroll')
            })
        </script>
    </body>
</html>